﻿@model MVC_Store.Models.ViewModels.Shop.ProductVM

@{
    ViewBag.Title = "Edit Product";
}

<h2>Edit Product</h2>

@if (TempData["SM"] != null)
{
    <div class="alert alert-success">
        @TempData["SM"]
    </div>
}

@using (Html.BeginForm("EditProduct", "Shop", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.Description, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Price, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Price, "", new { @class = "text-danger" })
            </div>
        </div>



        <div class="form-group">
            @Html.LabelFor(model => model.CategoryId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.CategoryId, Model.Categories, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.CategoryId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ImageName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ImageName, new { htmlAttributes = new { @class = "form-control" } })

                @if (@Model.ImageName != null)
                {
                    <img src="/Images/Uploads/Products/@Model.Id/Thumbs/@Model.ImageName" />
                }
                <br /><br />

                <img id="imgpreview" src="~/Content/img/no_image.png" />

                <div class="col-md-10">
                    <input type="file" , name="file" id="imageUpload" />
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Edit Product" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<hr />
@if (!Model.GalleryImages.Any())
{
    <h3>There are no gallery images for this product.</h3>
}

<form action="/admin/shop/SaveGalleryImages" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm">
    <div class="fallback">
        <input type="file" name="file" multiple="" />
        <input type="submit" value="Upload" />
    </div>
</form>

<br /><br />

      <div class="row">
          @foreach (var image in Model.GalleryImages)
          {
              <div class="col">
                  <div class="galleryStyle">
                      <div style="width: 200px; height: 200px;">
                          <img src="/Images/Uploads/Products/@Model.Id/Gallery/Thumbs/@image" />
                      </div>
                      <div style="text-align: center">
                          @Html.ActionLink("Delete", "DeleteImage", "Shop", new { @class = "deleteimage btn btn-danger", data_name = image, style = "margin: 10px" })
                      </div>
                  </div>
              </div>
          }
      </div>

<!-- *********************************************************** -->
<div>
    @Html.ActionLink("Back to Products", "Products")
</div>

<link href="~/Scripts/dropzone/basic.css" rel="stylesheet" />
<link href="~/Scripts/dropzone/dropzone.css" rel="stylesheet" />

@section Scripts
{
    <script src="~/Content/ShopJS/AddProductScript.js"></script>
    <script src="~/Scripts/dropzone/dropzone.js"></script>
    
    <script>

        /* Dropzone js*/

        Dropzone.options.dropzoneForm = {
            acceptedFiles: "image/*",
            init: function () {
                this.on("complete",
                    function (file) {
                        if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                            location.reload();
                        }
                    });
                this.on("sending",
                    function (file, xhr, formData) {
                        formData.append("id",  @Model.Id);
                    });
            }
        };

        /*-----------------------------------------------------------*/

        /* Delete gallery image */

        $("a.deleteimage").click(function(e) {
            e.preventDefault();

            if (!confirm("Confirm deletion")) return false;

            var $this = $(this);
            var url = "/admin/shop/DeleteImage";
            var imageName = $this.data("name");


            $.post(url, { id: @Model.Id, imageName: imageName }, function(data) {
                $this.parent().parent().parent().fadeOut("slow");
            });
        });


        /*-----------------------------------------------------------*/


    </script>
}